<template>
  <div class="demo-use-style">
    <DemoStyleParent status="warn">
      <DemoStyleChild>child</DemoStyleChild>
      <DemoStyleChild status="info">child</DemoStyleChild>
      <DemoStyleChild>child</DemoStyleChild>
    </DemoStyleParent>
    <hr>
    <DemoStyleParent status="warn">
      <DemoStyleChild>child</DemoStyleChild>
      <DemoStyleChild status="success">child</DemoStyleChild>
      <DemoStyleChild>child</DemoStyleChild>
    </DemoStyleParent>
  </div>
</template>

<script>
import DemoStyleChild from "./demo-style-child";
import DemoStyleParent from "./demo-style-parent";

export default {
  name: "use-style-demo",
  components: {
    DemoStyleChild,
    DemoStyleParent
  }
};
</script>

<style lang="scss">
@include theme {
  .cv-use-style-parent {
    @include statusMixin(use-style-parent) {
      background-color: mix($value, #fff, 20%);
    }
  }
  .cv-use-style-child {
    padding: 8px;
    margin: 8px 0;
    @include statusMixin(use-style-child) {
      background-color: $value;
      color: #fff;
    }
  }
}
</style>